<template>
	<view class="container">
		<view class="nickName">
			<textarea @input="bindTextAreaBlur" placeholder="请输入昵称"/>
			<view class="limitNum">10</view>
		</view>
		<view class="saveBtn flex-cenetr" @click="bindSave">完成</view>
	</view>
</template>

<script>
	import util from '../../utils/utils.js'
	export default {
	    data() {
	        return {
				nickName:'',//昵称
			}
	    },
	    methods: {
	        bindTextAreaBlur: function (e) {
				this.nickName = e.detail.value;
	        },
			bindSave(){
				let num = this.nickName.length;//限制字符
				console.log('2222',num)
				if(num >10){
					return util.showToast('字符不能超过10个')
				}
			}
	    }
	}
</script>

<style>
	@import url("../../common/css/iconfont.css");
	@import url("../../common/css/common.css");
	.nickName{
		width: 100%;
		margin-top:6rpx;
		height:350rpx;
		position: relative;
		background-color: #ccc;
		margin-bottom: 100rpx;
	}
	textarea{
		width: 100%;
		height: 245rpx;
		padding: 20rpx 15rpx;
	}
	.limitNum{
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
	}
	.saveBtn{
		width:250rpx;
		height:80rpx;
		background-color: #42A5FF;
		border-radius:16rpx;
		line-height: 80rpx;
		text-align: center;
	}
	.container{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
